<script setup name="album-page">
import { useRoute } from 'vue-router'
import { reactive, toRefs, onMounted } from 'vue'
import { albumDetail, albumDetailDynamic } from '@/services/search'
import { formatSearchSongs, formatDate, formartNum } from '@/utils/util'
import { ShareTwo, Message, DocAdd, Play, DownloadTwo, ListAdd } from '@icon-park/vue-next'
import { usePlayStore } from '@/stores'

import Header from '@/components/common/Header.vue'
import MusicCell from '@/components/common/MusicCell.vue'
import IconPark from '@/components/common/IconPark.vue'

const info = reactive({
  id: '',
  loading: false,
  songs: [],
  total: 0,
  album: {},
  Dynamic: {}
})

const playStore = usePlayStore()

const initData = async id => {
  info.loading = true
  const { album, songs } = await albumDetail(id)
  const res = await albumDetailDynamic(id)
  Object.assign(info, {
    album: album,
    songs: formatSearchSongs(songs),
    total: songs.length,
  })
  Object.assign(info.Dynamic, {
    subCount: res.subCount,
    commentCount: res.commentCount,
    shareCount: res.shareCount
  })
  info.loading = false
}

const { songs, album, Dynamic } = toRefs(info)

// 播放全部歌曲
const playAll = () => {
  // 过滤出非VIP的歌曲
  const nonVipSongs = songs.value.filter(song => !song.vip)
  // 设置播放列表为非VIP歌曲
  playStore.setPlaylist(nonVipSongs)
  // 设置播放状态为开始
  playStore.setPlayStatus(false)
  // 打开音乐详情弹框
  playStore.changeMusicDialog(true)
}

onMounted(() => {
  info.id = useRoute().query.id
  initData(useRoute().query.id)
})
</script>

<template>
  <div class="album-page">
    <img class="album-bg" :src="album?.blurPicUrl">
    <Header defaultStr="专辑" :title="album?.name">
      <template #content>
        <van-row gutter="24" justify="center" class="content-album">
          <van-col span="8" class="content-album-cover">
            <van-image class="content-album-cover-sheet" radius="10px" :src="`${album?.picUrl}?param=120y120`" />
          </van-col>

          <van-col span="16" class="content-album-info">
            <van-text-ellipsis class="content-album-info-title" :content="album?.name" rows="1" />
            <div class="content-album-info-author">
              <span>
                歌手：
                <span class="content-album-info-author-artist">{{ album.artist?.name }}</span>
              </span>
            </div>

            <div class="content-album-info-describe">
              <div class="content-album-info-describe-publishTime">发行时间：{{ formatDate(album?.publishTime) }}</div>
              <van-text-ellipsis :content="album?.description" rows="1" expand-text="展开" collapse-text="收起" />
            </div>
          </van-col>
        </van-row>

        <van-row gutter="24" justify="center" class="content-album-actions">
          <van-col span="18">
            <div class="content-album-actions-btn">
              <div class="content-album-actions-btn-icon">
                <IconPark :icon="DocAdd" :strokeWidth="2" :size="6" theme="two-tone" :fill="['#59677d', '#fff']" />
                <span>{{ formartNum(Dynamic?.subCount) }}</span>
              </div>
              <div class="content-album-actions-btn-icon">
                <IconPark :icon="Message" :strokeWidth="0" :size="6" theme="two-tone" :fill="['#59677d', '#fff']" />
                <span>{{ formartNum(Dynamic?.commentCount) }}</span>
              </div>
              <div class="content-album-actions-btn-icon">
                <IconPark :icon="ShareTwo" :strokeWidth="2" :size="6" theme="filled" :fill="['#59677d', '#fff']" />
                <span>{{ formartNum(Dynamic?.shareCount) }}</span>
              </div>
            </div>
          </van-col>
        </van-row>
      </template>
    </Header>

    <MusicCell :list="songs">
      <template #radius>
        <van-cell :border="false" class="radius">
          <template #title>
            <div class="radius-playall" @click="playAll">
              <IconPark :icon="Play" :size="6" theme="filled" fill="#fe3a39" />
              <span class="radius-playall-total">
                播放全部
                <span>({{ info.total }})</span>
              </span>
            </div>
          </template>

          <template #default>
            <div class="radius-playaction">
              <IconPark :icon="DownloadTwo" :size="6" />
              <IconPark :icon="ListAdd" :size="6" />
            </div>
          </template>
        </van-cell>
      </template>
    </MusicCell>
  </div>
</template>

<style scoped lang="scss">
.album-bg {
  position: absolute;
  width: 100%;
  height: auto;
  top: 0;
  right: 0;
  filter: blur(16px);
  z-index: -1;
}

.album-page {
  padding-bottom: 40px;
}
</style>